
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_vant_kit/widgets/button.dart';
import 'package:provider/provider.dart';
import 'package:shoes_shop/api/api.dart';
import 'package:shoes_shop/core/utils.dart';
import 'package:shoes_shop/models/public_provider_model.dart';
import '../../core/const.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'login_provider.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => LoginProvider()),
      ],
      child: Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          leading: BackButton(),
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
        body: Stack(
          children: [
            Image.asset('assets/login_bg.png'),
            Center(
              child: Container(
                width: 600.w,
                child: Consumer<LoginProvider>(
                  builder: (context, val, child) => ListView(
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          SizedBox(height: 250.w),
                          //用户名
                          Stack(
                            children: [
                              Positioned(
                                right: 60.w,
                                child: Image.asset(
                                  'assets/astronaut.png',
                                  width: 92.w,
                                  height: 110.w,
                                ),
                              ),
                              Column(
                                children: [
                                  SizedBox(
                                    height: 90.w,
                                  ),
                                  _inputField(
                                    maxLength: 30,
                                    keyboardType: TextInputType.emailAddress,
                                    controller: val.data['email']
                                      ..addListener(() {
                                        val.notify();
                                      }),
                                    placeholder: [
                                      '请输入邮箱',
                                      '用户名/邮箱',
                                      '请输入邮箱'
                                    ][val.data['type']],
                                    rightIcon: val.data['email'].text.length > 0
                                        ? InkWell(
                                            child: Container(
                                              width: 30.w,
                                              height: 30.w,
                                              decoration: BoxDecoration(
                                                color: AppColors.darkGray,
                                                borderRadius: BorderRadius.all(
                                                    Radius.circular(30.w)),
                                              ),
                                              child: Icon(
                                                Icons.close_rounded,
                                                size: 20.w,
                                                color: Colors.white,
                                              ),
                                            ),
                                            onTap: () {
                                              // val.data['email'].text =
                                              //     'yvnsjb18609@chacuo.net';
                                              // val.data['password'].text =
                                              //     'a12345678';
                                              val.data['email'].text =
                                                  '';
                                              val.data['password'].text =
                                                  '';
                                            },
                                          )
                                        : null,
                                  ),
                                ],
                              ),
                            ],
                          ),
                          //密码
                          Visibility(
                            visible: val.data['type'] != 2,
                            child: Column(
                              children: [
                                SizedBox(height: 40.w),
                                _inputField(
                                  obscureText: val.data['passwordHidden'],
                                  maxLength: 20,
                                  controller: val.data['password'],
                                  placeholder: '请输入密码',
                                  rightIcon: InkWell(
                                    child: Icon(
                                      val.data['passwordHidden']
                                          ? Icons.visibility_off
                                          : Icons.visibility,
                                      size: 40.w,
                                      color: AppColors.darkGray,
                                    ),
                                    onTap: () {
                                      bool flag = !val.data['passwordHidden'];
                                      val.changeValue('passwordHidden', flag);
                                    },
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Visibility(
                            visible: val.data['type'] == 0,
                            child: Column(
                              children: [
                                SizedBox(
                                  height: 40.w,
                                ),
                                _inputField(
                                  obscureText:
                                      val.data['confirmPasswordHidden'],
                                  maxLength: 20,
                                  controller: val.data['confirmPassword'],
                                  placeholder: '请再次输入密码',
                                  rightIcon: InkWell(
                                    child: Icon(
                                      val.data['confirmPasswordHidden']
                                          ? Icons.visibility_off
                                          : Icons.visibility,
                                      size: 40.w,
                                      color: AppColors.darkGray,
                                    ),
                                    onTap: () {
                                      bool flag =
                                          !val.data['confirmPasswordHidden'];
                                      val.changeValue(
                                          'confirmPasswordHidden', flag);
                                    },
                                  ),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(
                            height: 60.w,
                          ),
                          //登录按钮
                          // Ink(
                          //   decoration: BoxDecoration(
                          //     color: Colors.white,
                          //     borderRadius: BorderRadius.all(Radius.circular(100.w)),
                          //   ),
                          //   child: InkWell(
                          //     borderRadius: BorderRadius.all(Radius.circular(100.w)),
                          //     child: Container(
                          //       height: 100.w,
                          //       decoration: BoxDecoration(
                          //           // borderRadius:
                          //           //     BorderRadius.all(Radius.circular(100.w)),
                          //           ),
                          //       child: Center(
                          //         child: Text(
                          //           '登录',
                          //           style: TextStyle(
                          //             fontSize: 40.w,
                          //             color: AppColors.deepBlue,
                          //             fontWeight: FontWeight.w400,
                          //             letterSpacing: 20.w, //字间距
                          //           ),
                          //         ),
                          //       ),
                          //     ),
                          //     onTap: () {
                          //       // passWordLogin();
                          //     },
                          //   ),
                          // ),
                          // 类似Vant的按钮组件
                          NButton(
                              width: double.infinity,
                              height: 100.w,
                              text: ['注册', '登录', '找回密码'][val.data['type']],
                              size: 'large',
                              type: "primary",
                              loading: val.data['buttonLoading'],
                              round: true,
                              color: Colors.white,
                              textColor: AppColors.deepBlue,
                              onClick: () async {
                                int flag = val.data['type'];
                                String email = val.data['email'].text;
                                String password = val.data['password'].text;
                                String confirmPassword =
                                    val.data['confirmPassword'].text;
                                if (email.length == 0) {
                                  showToast('请输入邮箱');
                                  return;
                                }
                                if (!isEmail(email)) {
                                  showToast('请输入正确的邮箱');
                                  return;
                                }
                                if (password.length == 0 && flag != 2) {
                                  showToast('请输入密码');
                                  return;
                                }
                                if (password.length < 8 && flag != 2) {
                                  showToast('密码至少8位数');
                                  return;
                                }
                                if (flag == 0) {
                                  //注册
                                  if (password != confirmPassword) {
                                    showToast('两次输入的密码不一致');
                                  } else {
                                    val.changeValue('buttonLoading', true);
                                    var res = await mailRegistration(
                                        val.data['email'].text,
                                        val.data['password'].text);
                                    showToast(res['message'].toString());
                                    val.changeValue('type', 1);
                                  }
                                  val.changeValue('buttonLoading', false);
                                }
                                if (flag == 1) {
                                  val.changeValue('buttonLoading', true);
                                  //登录
                                  var res = await mailLogin(
                                      context,
                                      val.data['email'].text,
                                      val.data['password'].text);
                                  if (res['code'] == 200) {
                                    Provider.of<PublicProviderModel>(context,
                                            listen: false)
                                        .changeIndex(3);
                                    Navigator.pop(context);
                                  } else {
                                    showToast(res['message'].toString());
                                  }
                                  val.changeValue('buttonLoading', false);
                                }
                                if (flag == 2) {
                                  //找回密码
                                  sendSmsCode();
                                }
                              }),
                          SizedBox(height: 30.w),
                          //立即注册 忘记密码
                          Padding(
                            padding: EdgeInsets.symmetric(horizontal: 30.w),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                InkWell(
                                  child: Text(
                                    [
                                      '已有帐号？去登录',
                                      '立即注册',
                                      '去登录'
                                    ][val.data['type']],
                                    style: TextStyle(
                                        fontSize: 26.w, color: Colors.white),
                                  ),
                                  onTap: () {
                                    val.changeValue(
                                        'type', [1, 0, 1][val.data['type']]);
                                  },
                                ),
                                Visibility(
                                  visible: val.data['type'] != 2,
                                  child: InkWell(
                                    child: Text(
                                      '忘记密码?',
                                      style: TextStyle(
                                          fontSize: 26.w, color: Colors.white),
                                    ),
                                    onTap: () {
                                      val.changeValue('type', 2);
                                    },
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
            // Positioned(
            //   width: MediaQuery.of(context).size.width,
            //   top: MediaQuery.of(context).size.height - 150.w,
            //   child: Center(
            //     child: Container(
            //       width: 500.w,
            //       child: Row(
            //         mainAxisAlignment: MainAxisAlignment.spaceBetween,
            //         children: [
            //           Column(
            //             children: [
            //               Container(
            //                 width: 50.w,
            //                 height: 50.w,
            //                 color: Colors.white,
            //               ),
            //               SizedBox(height: 15.w,),
            //               Text(
            //                 '微信',
            //                 style: TextStyle(
            //                   color: Colors.white,
            //                   fontSize: 20.w,
            //                 ),
            //               ),
            //             ],
            //           ),
            //           Column(
            //             children: [
            //               Container(
            //                 width: 50.w,
            //                 height: 50.w,
            //                 color: Colors.white,
            //               ),
            //               SizedBox(height: 15.w,),
            //               Text(
            //                 'QQ登录',
            //                 style: TextStyle(
            //                   color: Colors.white,
            //                   fontSize: 20.w,
            //                 ),
            //               ),
            //             ],
            //           ),
            //           Column(
            //             children: [
            //               Container(
            //                 width: 50.w,
            //                 height: 50.w,
            //                 color: Colors.white,
            //               ),
            //               SizedBox(height: 15.w,),
            //               Text(
            //                 '微博',
            //                 style: TextStyle(
            //                   color: Colors.white,
            //                   fontSize: 20.w,
            //                 ),
            //               ),
            //             ],
            //           ),
            //         ],
            //       ),
            //     ),
            //   ),
            // ),
          ],
        ),
        backgroundColor: AppColors.purplishBlue,
      ),
    );
  }
}

// class LoginPage extends StatelessWidget {
//   // const LoginPage({ Key? key }) : super(key: key);
//   bool loading = false;

//   @override
//   Widget build(BuildContext context) {
//     return
//   }
// }

//输入框
Widget _inputField(
    {String placeholder,
    Widget rightIcon,
    TextEditingController controller,
    TextInputType keyboardType = TextInputType.text,
    bool obscureText = false,
    int maxLength}) {
  return Container(
    height: 100.w,
    padding: EdgeInsets.symmetric(vertical: 0, horizontal: 30.w),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(100.w)),
      color: Colors.white,
    ),
    child: Row(
      children: [
        Expanded(
          flex: 1,
          child: TextField(
              obscureText: obscureText,
              keyboardType: keyboardType,
              controller: controller,
              decoration: InputDecoration(
                // fillColor: Color(0xFFFFFFFF),
                // filled: true,
                hintText: placeholder,
                hintStyle: TextStyle(color: AppColors.darkGray),
                contentPadding: EdgeInsets.only(
                  top: 0,
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Color(0x00000000)),
                  //   borderRadius: BorderRadius.all(Radius.circular(100.w)),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Color(0x00000000)),
                  //   borderRadius: BorderRadius.all(Radius.circular(100.w)),
                ),
              ),
              inputFormatters: [
                LengthLimitingTextInputFormatter(maxLength), //最大字数限制
              ]),
        ),
        Container(
          width: 40.w,
          height: 40.w,
          child: Center(child: rightIcon),
        ),
      ],
    ),
  );
}
